<template>
   <div class="goods-list">
      <div class="goods-item" 
         v-for="item in goodslist"
         :key="item.proid"
         @click="$router.push('/detail/'+item.proid)"
      >
         <img :src="item.img1" alt="">
         <p class="name">{{item.proname}}</p>
         <p class="price">
            ¥<span class="price-value">{{item.originprice}}</span>
         </p>
      </div>
   </div>
</template>

<script setup lang="ts">
defineProps<{
   goodslist:{
      proid:string,
      proname:string,
      img1:string,
      originprice:number,
      [propName:string]:any
   }[]
}>()
</script>

<style scoped lang="scss">
.goods-list{
  margin:10px;
  
  .goods-item{
    font-size:0.8em;
    box-sizing: border-box;
    padding:5px;
    width:50%;
    display: inline-block;
    img{
      width:80%;
      margin:5px auto;
    }
    .name{
      color:#333;
      height:3em;
      line-height: 1.5em;
      overflow: hidden;
    }
    .price{
      color:red;
      font-weight: 900;
    }
  }
}
</style>
